<template>
    <div class="search">
        <input
            type="text"
            class="searchInput"
            placeholder="搜索歌曲..."
            id="headerSearch"
            v-model="mySearchInput"
            @keyup="myChangeSearch()"
            @blur="searchModel = false"
            v-on:keyup.enter="sendSearch(mySearchInput)"
        />

        <transition
            enter-active-class="animated fadeInUp"
            leave-active-class="animated fadeOutDown"
        >
            <div class="searchModel" v-show="searchModel">
                <div class="hot-search" v-if="!isSearch">
                    <div class="hot-title"><span></span> <em>实时热搜</em></div>
                    <div class="hot-list">
                        <ul>
                            <li
                                v-for="item in hotSearchList"
                                @click="jumpsearch(item.first)"
                            >
                                <span></span><em>{{ item.first }}</em>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="serachSuggest" v-if="isSearch">
                    <div class="song-box" v-if="searchSug.artists.length">
                        <div class="song-title">
                            <div class="img-box">
                                <img
                                    src="../../assets/images/歌手.png"
                                    alt=""
                                />
                            </div>
                            <div class="title">
                                <span>歌手</span>
                            </div>
                        </div>
                        <div class="dataList">
                            <ul>
                                <li
                                    v-for="item in searchSug.artists"
                                    @click="sendSearch(item.name)"
                                >
                                    {{ item.name }}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="song-box" v-if="searchSug.songs.length">
                        <div class="song-title">
                            <div class="img-box">
                                <img
                                    src="../../assets/images/音乐icon.png"
                                    alt=""
                                />
                            </div>
                            <div class="title">
                                <span>单曲</span>
                            </div>
                        </div>
                        <div class="dataList">
                            <ul>
                                <li
                                    v-for="item in searchSug.songs"
                                    @click="sendSearch(item.name)"
                                >
                                    {{ item.name }}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="song-box" v-if="searchSug.albums.length">
                        <div class="song-title">
                            <div class="img-box">
                                <img
                                    src="../../assets/images/专辑icon.png"
                                    alt=""
                                />
                            </div>
                            <div class="title">
                                <span>专辑</span>
                            </div>
                        </div>
                        <div class="dataList">
                            <ul>
                                <li
                                    v-for="item in searchSug.albums"
                                    @click="sendSearch(item.name)"
                                >
                                    {{ item.name }}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="song-box" v-if="searchSug.playlists.length">
                        <div class="song-title">
                            <div class="img-box">
                                <img
                                    src="../../assets/images/歌单.png"
                                    alt=""
                                />
                            </div>
                            <div class="title">
                                <span>歌单</span>
                            </div>
                        </div>
                        <div class="dataList">
                            <ul>
                                <li
                                    v-for="item in searchSug.playlists"
                                    @click="sendSearch(item.name)"
                                >
                                    {{ item.name }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="history-search">
                    <div class="history-title">
                        <div class="left"><span></span><em>历史记录</em></div>
                        <div class="right" @click="clearHistory()">
                            <div class="img-box">
                                <img
                                    src="../../assets/images/垃圾桶.png"
                                    alt=""
                                />
                            </div>
                        </div>
                    </div>
                    <div class="history-list">
                        <div
                            class="history-item"
                            v-for="item in historyList"
                            @click="jumpsearch(item)"
                        >
                            {{ item }}
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import { formatTime, debounce, lazyload } from "../../utils/common";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "searchModel"
);
const { mapActions: detailMapActions } = createNamespacedHelpers(
    "searchDetails"
);
export default {
    data() {
        return {
            mySearchInput: "",
            historyList: [],
            searchModel: false,
        };
    },
    created() {
        this.debounce = debounce;
        this.inputSerach = this.debounce("myChangeSearch", 500);
        this.getSearchHot();
        this.getSearchHotDetail();
        this.searchSuggest();
    },
    mounted() {
        this.loadingHistory();
    },
    methods: {
        ...mapActions(["getSearchHot", "getSearchHotDetail", "searchSuggest"]),
        ...detailMapActions(["search"]),
        ...mapMutations([
            "changeSearchInput",
            "changeIsSearch",
            "changeIsSearch2",
        ]),
        jumpsearch(val) {
            this.$router.push("/home/search/" + val);
            this.search(this.$route.params._keywords);
            this.changeIsSearch2();
            // localStorage.setItem("_history", val);
        },
        //发送搜索请求
        sendSearch(val) {
            // let arr = [{ his: val }];
            console.log("发送请求拉搜索时~~~~~~~~");
            this.$router.push("/home/search/" + val);
            this.search(this.$route.params._keywords);
            this.mySearchInput = "";
            this.setHistory(val);
        },
        //我的搜索输入事件
        myChangeSearch() {
            if (this.mySearchInput == "") {
                this.changeIsSearch2();
            } else {
                this.changeIsSearch();
                this.changeSearchInput(this.mySearchInput);
                this.searchSuggest();
            }
            //当输入时模态框显示
            this.searchModel = true;
        },
        //输入历史记录
        setHistory(val) {
            let lishi = localStorage.getItem("_history");
            if (lishi != null) {
                lishi = JSON.parse(lishi);
                lishi.push(val);
                localStorage.setItem("_history", JSON.stringify(lishi));
            } else {
                let arr = [val];
                localStorage.setItem("_history", JSON.stringify(arr));
            }
            this.loadingHistory();
        },

        //载入历史记录
        loadingHistory() {
            this.historyList = JSON.parse(localStorage.getItem("_history"));
        },
        //删除历史记录
        clearHistory() {
            localStorage.removeItem("_history");
            this.loadingHistory();
        },
    },
    computed: {
        ...mapState(["hotSearchList", "isSearch", "searchSug"]),
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/searchModel.scss";
</style>